<template>
  <view class="payment-success">
    <view class="ps-body">
      
      <navBar title="支付成功" background-color="transparent"></navBar>
      
      <view class="ps-header">
        <view class="ps-h-content">
          <view class="image">
            <u--image src="/static/img/pay@2x.png" width="62rpx" height="64rpx"></u--image>
          </view>
          <text class="success-text">订单付款成功</text>
          <view class="code" v-if="order.batchRaffleName">
            <text>抽奖码：{{ order.batchRaffleName }}</text>
          </view>
        </view>
      </view>
      
      <!-- 支付信息 -->
      <view class="pay-info">
        <view class="pi-item">
          <text class="title">支付方式：</text>
          <text>{{ payType[order.payType] }}</text>
        </view>
        <view class="pi-item">
          <text class="title">支付金额</text>
          <text>¥{{ order.payMoney || '' }}</text>
        </view>
      </view>
      
      <!-- tips -->
      <view class="ps-tips">
        <u--image src="/static/img/car@2x.png" width="44rpx" height="34rpx"></u--image>
        <view class="text">
          <text class="title">温馨提示：</text>
          <text>阿特拉斯卡友之家不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作。</text>
        </view>
      </view>
    </view>
    
    <view class="ps-footer">
      <u-button type="primary" plain @click="toOrder">查看订单</u-button>
      <u-button type="primary" @click="toIndex">回到首页</u-button>
    </view>
  </view>
</template>

<script>
  import navBar from '@/components/navBar.vue'
  import { mapGetters } from 'vuex'
  
  export default {
    components: {
      navBar
    },
    data() {
      return {
        order: {},
        payType: {
          score: '积分',
          wx: '微信支付',
          alipay: '支付宝',
        }
      }
    },
    computed: {
      ...mapGetters('global', ['getSystemInfo']),
    },
    methods: {
      // 获取订单信息
      async getOrder(data) {
        const { datas } = await this.$request({
          url: '/order-center/car-owner-order/pay-success-page',
          data: {
            orderId: data.orderId,
            type: 1
          }
        })
        this.order = datas
      },
      
      // 跳转订单页
      toOrder() {
        uni.navigateTo({
        	url: '/orderPack/detail/index',
        	success: (res) => {
        		res.eventChannel.emit('detailInfo', {
        			data: {
                ...this.order,
                id: this.order.orderId
              }
        		})
        	}
        })
      },
      
      // 回到首页
      toIndex() {
        uni.switchTab({ url: '/pages/index/index/index' })
      }
    },
    
    onLoad() {
      // const eventChannel = this.getOpenerEventChannel()
      // eventChannel.on('paymentSuccess', this.getOrder)
      uni.$on('paymentSuccess',this.getOrder)
    }
  }
</script>

<style scoped lang="scss">
.payment-success {
  display: flex;
  flex-direction: column;
  height: 100vh;
  
  .ps-body {
    /deep/ .uicon-home,
    /deep/ .uniui-back,
    /deep/ .a-title{
      color: #fff !important;
    }
    flex: 1;
  }
  
  .ps-header {
    background-color: rgba(207, 26, 27, 1);
    color: #fff;
    height: 570rpx;
  }
  
  .ps-h-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 210rpx;
    .image {
      margin: 0 auto;
    }
    .success-text {
      font-size: 44rpx;
      margin: 32rpx 0 0;
      line-height: 1;
    }
    .code {
      width: 250rpx;
      height: 72rpx;
      line-height: 72rpx;
      margin: 26rpx auto 0;
      text-align: center;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 36rpx;
      color: rgba(207, 26, 27, 1);
    }
  }
  
  .pay-info {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.85);
    border-radius: 12rpx;
    margin: -70rpx 20rpx 0;
    padding: 30rpx 25rpx;
    background-color: #fff;
    .pi-item {
      line-height: 2;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .title {
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }
  
  .ps-tips {
    display: flex;
    flex-direction: row;
    gap: 18rpx;
    border-radius: 12rpx;
    margin: 24rpx 20rpx 0;
    padding: 30rpx 25rpx;
    background-color: #fff;
    .title {
      font-weight: bold;
    }
    .text {
      font-size: 26rpx;
      color: rgba(0, 0, 0, 0.65);
    }
  }
  
  .ps-footer {
    display: flex;
    flex-direction: row;
    gap: 40rpx;
    background-color: #fff;
    padding: 32rpx 32rpx env(safe-area-inset-bottom);
  }
}
</style>
